<template>
    <div class="category-container">
        <NavBar>
            <template #default>
                分类
            </template>
        </NavBar>

        <div class="category-content">
            <!-- 左侧分类导航 -->
            <div class="category-sidebar">
                <div v-for="(item, index) in categories" :key="item.categoryId" class="sidebar-item"
                    :class="{ active: activeIndex === index }" @click="changeCategory(index)">
                    <img :src="item.icon" class="category-icon" />
                    <span class="category-name">{{ item.categoryName }}</span>
                </div>
            </div>

            <!-- 右侧商品展示 -->
            <div class="category-main">
                <div class="subcategories">
                    <!-- 使用Element Plus图标 -->
                    <div v-for="(sub, subIndex) in currentSubcategories" :key="subIndex" class="subcategory-item">
                        <div class="subcategory-icon">
                            <el-icon :size="36" :color="getRandomColor()">
                                <component :is="sub.icon" />
                            </el-icon>
                        </div>
                        <div class="subcategory-name">{{ sub.name }}</div>
                    </div>
                </div>

                <!-- 商品列表 - 修改为使用router-link -->
                <div class="product-list">
                    <router-link
                        v-for="product in currentProducts"
                        :key="product.productId"
                        :to="{ name: 'detail', query: { item: JSON.stringify(product) } }"
                        class="product-item"
                    >
                        <img :src="product.mainImage" class="product-image" />
                        <div class="product-info">
                            <div class="product-name">{{ product.productName }}</div>
                            <div class="product-price">
                                <span class="current-price">¥{{ product.price }}</span>
                                <span v-if="product.originalPrice > product.price" class="original-price">¥{{ product.originalPrice }}</span>
                            </div>
                        </div>
                    </router-link>
                </div>

                <!-- 分页加载状态 -->
                <div v-if="loading" class="loading-text">加载中...</div>
                <div v-if="currentPagination.current >= currentPagination.pages && currentProducts.length > 0" class="no-more-text">没有更多了</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import NavBar from '../../components/common/NavBar.vue';
import {  computed, markRaw, onMounted, onUnmounted } from 'vue';
import {
    Star, // 推荐
    Goods, // 商品
    Present, // 礼品
} from '@element-plus/icons-vue';
// import { useRouter } from 'vue-router';
import { useCategoryStore } from '@/stores/category';

// const router = useRouter();
const categoryStore = useCategoryStore();

// Mark the icons as non-reactive
const icons = {
    Star: markRaw(Star),
    Goods: markRaw(Goods),
    Present: markRaw(Present)
};

// 计算属性
const categories = computed(() => categoryStore.categories);
const activeIndex = computed(() => categoryStore.activeIndex);
const currentProducts = computed(() => categoryStore.currentProducts);
const currentPagination = computed(() => categoryStore.currentPagination);
const loading = computed(() => categoryStore.loading);

// 模拟子分类数据
const generateSubcategories = () => {
    const subcategories = [];
    const names = ['热门推荐', '新品上市', '限时特惠', '爆款榜单', '精选套装', '会员专享'];
    const iconKeys = Object.keys(icons);

    for (let i = 0; i < names.length; i++) {
        subcategories.push({
            name: names[i],
            icon: icons[iconKeys[i % iconKeys.length]]
        });
    }

    return subcategories;
};

// 当前选中的子分类
const currentSubcategories = computed(() => {
    if (categories.value.length === 0) return [];
    return generateSubcategories();
});

// 随机颜色生成
const getRandomColor = () => {
    const colors = ['#ff9900', '#ff5000', '#f56c6c', '#e6a23c', '#67c23a', '#409eff'];
    return colors[Math.floor(Math.random() * colors.length)];
};

// 切换分类
const changeCategory = (index) => {
    categoryStore.changeCategory(index);
};

// 移除原来的viewProductDetail方法，因为我们现在直接使用router-link

// 滚动加载更多处理
const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // 距离底部100px时加载更多
    if (scrollTop + windowHeight >= scrollHeight - 100 && !loading.value &&
        currentPagination.value.current < currentPagination.value.pages) {
        categoryStore.loadMoreProducts();
    }
};

onMounted(async () => {
    // 初始化加载数据
    await categoryStore.initialize();

    // 添加滚动事件监听
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
/* 原有的样式保持不变 */
.category-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.category-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧分类导航 */
.category-sidebar {
    width: 100px;
    background-color: #f8f8f8;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-item {
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    font-size: 12px;
    color: #666;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.sidebar-item.active {
    background-color: #fff;
    color: #ff5000;
    border-left: 3px solid #ff5000;
    font-weight: bold;
}

.category-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-bottom: 5px;
}

.category-name {
    text-align: center;
    word-break: break-all;
}

/* 右侧内容区域 */
.category-main {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.subcategories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.subcategory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    transition: transform 0.2s;
}

.subcategory-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.subcategory-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subcategory-name {
    font-size: 12px;
    color: #333;
    text-align: center;
}

/* 商品列表样式 */
.product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.product-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.product-info {
    padding: 10px;
}

.product-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 36px;
    line-height: 18px;
}

.product-price {
    display: flex;
    align-items: center;
}

.current-price {
    font-size: 16px;
    color: #ff5000;
    font-weight: bold;
}

.original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-left: 5px;
}

.loading-text, .no-more-text {
    text-align: center;
    padding: 10px;
    color: #999;
}
/* 添加router-link的样式，使其表现得像div */
.product-item {
    display: block;
    text-decoration: none;
    color: inherit;
}
</style>